<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//header.php"; ?>  
  <script type="text/javascript" src="<?php echo $data['baseurl']; ?>global/js/frb-popup-shadow/frb-popup-shadow.js"></script>
  <link rel="stylesheet" type="text/css" href="<?php echo $data['baseurl']; ?>global/css/frb-popup-shadow/frb-popup-shadow.css">
  <link rel="stylesheet" type="text/css" href="<?php echo $data['baseurl']; ?>global/css/frb-slide-header/frb-slide-header.css">
  <script type="text/javascript" src="<?php echo $data['baseurl']; ?>global/js/frb-slide-header/frb-slide-header.js"></script>
  <script type="text/javascript" src="<?php echo $data['baseurl']; ?>global/js/jquery-ui-1.8.16.custom.min.js"></script>
  <script type="text/javascript" src="<?php echo $data['baseurl']; ?>global/js/jquery-datepicker-fr.js"></script>
  <script type="text/javascript" src="<?php echo $data['baseurl']; ?>global/js/frb-scroll-text.js"></script>
  <link rel="stylesheet" type="text/css" href="<?php echo $data['baseurl']; ?>global/css/datepicker/jquery-ui-1.8.16.datepicker.css">
</head>

<body>
  <!-- <div class="main-site-top-shadow"></div> -->
  <div id="main-site-shadow">
    <div id="main-site" class='main-site-bottom-appartements'>
      <?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//menu.php"; ?>
      <div id='main-site-content-appartements'>
        <div id='main-site-content-appartements-title'><h1 class='shrink-bottom shrink-top'>Appartements disponibles</h1></div>
        <div id='main-site-content-appartements-list'> 
          <div id='component-thumbs-viewer'>
          
          </div>
        </div>
        <div id='main-site-content-appartements-content'>
          <div id='main-site-content-appartements-content-image'> <img src='<?php echo $data['baseurl']; ?>global/img/plan/theatre.jpg' alt=''></div>
          <div id='main-site-content-appartements-content-text'>
            <div id='main-site-content-appartements-content-text-searchengine'>
            <div id='search-engine-todisplay'> <span class='bold bigger'>Recherche avancée </span><span class='shrink'>cliquez pour effectuer une recherche d'appartements personnalisée</span></div>
            <span class='bold'>Recherche</span>
              <div id='search-engine-surface'>
              <span class='bold'>Surface minimum : </span> 
              <select id='select-surface-min' name='surface_min' class='choice'>
                <option value='0'></option>
                <option value='10'>10 m²</option>
                <option value='15'>15 m²</option>
                <option value='20'>20 m²</option>
                <option value='25'>25 m²</option>
                <option value='30'>30 m²</option>
              </select>
              <span class='bold'>Loyer Maximum : </span> 
              <input type='text' name='loyer_max' maxlength="4" size="4" class='choice'> <span class='shrink'>€/mois charges comprises</span>
              </div>        
            </div>
            <div id='main-site-content-appartements-content-text-flatZone'>
              <?php foreach($data['flats'] as $k1=>$v1): ?>
              <div class='main-site-content-appartements-content-text-flat'>
              <div style='display: none' class='flat-ref'><?php echo $v1->cha_id; ?></div>
                <img src='<?php echo $data['baseurl']; ?>global/img/appartements/pictures/thumbnails/<?php echo $data['pictures'][$v1->cha_id]['pictures'][0]?>' alt='<?php echo $data['pictures'][$v1->cha_id]['alt']?>'>
                <div class='main-site-content-appartements-content-tex-flat-content'>
                  <div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Emplacement </span>: <?php echo $v1->FrbFlatImmeuble->imm_adr; ?> à Marseille</div>
                  <div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Surface</span> : <?php echo $v1->cha_surf; ?> m²</div>
                  <div class='main-site-content-appartements-content-tex-flat-content-line'> 
                    <span class='bold'>Loyer à l'année</span> : <?php echo $v1->cha_loy_low; ?> €/mois 
                    <span class='bold'> Pleine saison </span>: <a href='<?php echo $data['baseurl']; ?>contact' class='frb-popup-shadow'>nous contacter</a></div>
                  <div class='main-site-content-appartements-content-tex-flat-content-line'><span class='bold'>Description : </span><?php echo $v1->cha_det; ?></div>
                </div>
              </div>
              <?php endforeach; ?>
            </div>
          </div>
        </div>
        <div id='main-site-content-appartements-content-pagination'>page De test</div>
      </div>
    </div>
  </div>
  <?php include Doo::conf()->SITE_PATH .  Doo::conf()->PROTECTED_FOLDER . "viewc//menuBottom.php"; ?>

<script type="text/javascript">
$(document).ready(function(){

  function reLoad(urlApp, data){
    $('#main-site-content-appartements-content-text-flatZone').fadeOut('slow', function(){
      $.ajax({
        urlApp: url,
        type: 'POST',
        cache: false,
        data: data,
        success: function(html){
          $('#main-site-content-appartements-content-text-flatZone').html(html);
        }
      });
      $('#main-site-content-appartements-content-text-flatZone').fadeIn('slow');
    });
  }

  $('#search-engine-todisplay').click(
    function(){
      $('#search-engine-todisplay').hide();
      $('#main-site-content-appartements-content-text-searchengine').animate({height : '35px', padding : '10px' });
    });
  
  $('.frb-popup-shadow').frbPopupShadow({
    link : 'contact',
    host : '<?php echo $data['baseurl']; ?>',
    currentPage : 'appartements'
  });
  var oldToggle=null;
  $('.main-site-content-appartements-content-text-flat').click(function(){
    if($(this).css('height') == '100px'){
      $(this).prevAll('.main-site-content-appartements-content-text-flat').hide('normal');
      $(this).animate({height : '300px'});
      if(oldToggle != null)
        oldToggle.animate({height : '100px'});
      oldToggle = $(this);
    }else if($(this).css('height') == '300px'){
      oldToggle = null;
      $(this).animate({height : '100px'});
      $('.main-site-content-appartements-content-text-flat').show('normal');
    }
  });

  $('#select-surface-min').change(function(){
    urlApp = '<?php echo $data['baseurl']; ?>appartements';
    data = $('.choice').serialize();
    reLoad(urlApp, data);
  });
  
  
});
</script>  
</body>
</html>